<template>
	<div class="ShopAccount">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/' }"><i class="lh lh-diaodu fw_100"></i></el-breadcrumb-item>
			<el-breadcrumb-item>供应商</el-breadcrumb-item>
			<el-breadcrumb-item>供应商管理</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="content_Box box-shadow abnormal mt_15">
			<div class="py_5 px_10">
				<el-row>
					<el-col :span="2">
						<el-button type="success" class="fl" @click="goToAdd()" round size="mini">新增供应商</el-button>
					</el-col>
					<el-col :span="22">
						<el-form :inline="true" class="form-inline fr" @keyup.enter.native="shearchBtn()">
							<el-form-item>
								<!-- <el-input class="w_150i" v-model="query.name" placeholder="供应商名称"></el-input> -->
								<el-autocomplete
									class="inline-input"
									v-model="query.name"
									:fetch-suggestions="querySearch"
									placeholder="供应商名称"
									:trigger-on-focus="true"
								></el-autocomplete>
							</el-form-item>
							<el-form-item class="w_100">
								<el-select v-model="query.status" placeholder="供应商状态">
									<el-option label="正常" value="1"></el-option>
									<el-option label="停用" value="2"></el-option>
								</el-select>
							</el-form-item>
							<lh-agent-list @sendValue="setValue" :reset="agent_reset"></lh-agent-list>
							<el-form-item>
								<el-select class="w_110" v-model="query.city_id" placeholder="请选择城市">
									<el-option v-for="item in cityList" :key="item.id" :label="item.name" :value="item.id"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item>
								<el-input v-model="query.principal_mobile" placeholder="负责人手机号"></el-input>
							</el-form-item>
							<el-form-item class="w_100">
								<el-select v-model="query.audit_status" placeholder="审核状态">
									<el-option label="审核中" value="10"></el-option>
									<el-option label="审核通过" value="20"></el-option>
									<el-option label="审核驳回" value="30"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item prop="start_time">
								<el-date-picker
									class="w_180i"
									v-model="query.start_time"
									type="datetime"
									value-format="yyyy-MM-dd HH:mm:ss"
									format="yyyy-MM-dd HH:mm:ss"
									default-time="00:00:00"
									placeholder="开始时间"
								>
								</el-date-picker> </el-form-item
							>~
							<el-form-item prop="end_time">
								<el-date-picker
									class="w_180i"
									v-model="query.end_time"
									type="datetime"
									value-format="yyyy-MM-dd HH:mm:ss"
									format="yyyy-MM-dd HH:mm:ss"
									default-time="23:59:59"
									placeholder="结束时间"
								>
								</el-date-picker>
							</el-form-item>
							<el-form-item>
								<!-- <el-input v-model="query.bd_name" placeholder="创建人" class="w_100i"></el-input> -->
								<el-autocomplete
									class="inline-input"
									v-model="query.bd_name"
									:fetch-suggestions="querySearchCjr"
									placeholder="创建人"
									:trigger-on-focus="true"
								></el-autocomplete>
							</el-form-item>
							<el-form-item>
								<!-- <el-input v-model="query.audit_name" placeholder="审核人" class="w_100i"></el-input> -->
								<el-autocomplete
									class="inline-input"
									v-model="query.audit_name"
									:fetch-suggestions="querySearchShr"
									placeholder="审核人"
									:trigger-on-focus="true"
								></el-autocomplete>
							</el-form-item>
							<el-button size="mini" type="primary" class="round-right" native-type="button" @click="shearchBtn"
								>搜索</el-button
							>
							<el-button size="mini" round @click="resetDataBtn">重置</el-button>
						</el-form>
					</el-col>
				</el-row>
			</div>
			<div class="tableMaxBox">
				<template>
					<!-- 表格部分 -->
					<el-table :data="demandList" stripe>
						<el-table-column prop="id" label="序号" width="50px" align="center">
							<template slot-scope="{ $index }">
								<span>{{ $index + 1 }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="sn" label="供应商编号" width="150px">
							<template slot-scope="{ row }">
								<span>{{ row.sn }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="amount" label="供应商名称" width="150px">
							<template slot-scope="{ row }">
								<span style="color: #02a7f0; cursor: pointer;" @click="toMore(row)">{{ row.name }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="amount_after" label="供应商类型" width="80px">
							<template slot-scope="{ row }">
								<span v-if="row.type == '1'">公司</span>
								<span v-if="row.type == '2'">个人</span>
							</template>
						</el-table-column>
						<el-table-column prop="agent_name" label="代理商" width="140"></el-table-column>
						<el-table-column prop="city_name" label="所属城市" width="150px">
							<template slot-scope="{ row }">
								<span>{{ row.city_name }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="status_tag" label="供应商状态" width="100px">
							<template slot-scope="{ row, $index }">
								<el-switch
									v-model="row.status_tag"
									:disabled="+row.audit_status != 20"
									active-color="#13ce66"
									inactive-color="#ff4949"
									@change="redactBtn(row, $index)"
								>
								</el-switch>
							</template>
						</el-table-column>
						<el-table-column prop="principal" label="负责人" width="80px"> </el-table-column>
						<el-table-column prop="principal_mobile" label="负责人手机号" width="100px"></el-table-column>
						<el-table-column prop="person_num" label="用工人数" width="80px">
							<template slot-scope="{ row }">
								<span style="color: #00bfbf; cursor: pointer;" @click="toExport(row)">{{ row.person_num }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="audit_status" label="审核状态" width="80px">
							<template slot-scope="{ row }">
								<span v-if="row.audit_status == '10'">审核中</span>
								<span class="text-success" v-if="row.audit_status == '20'">审核通过</span>
								<span class="text-danger" v-if="row.audit_status == '30'">审核驳回</span>
							</template>
						</el-table-column>
						<el-table-column prop="audit_name" label="审核人" width="80px"></el-table-column>
						<el-table-column prop="remark" label="备注" width="200px"></el-table-column>
						<el-table-column prop="add_time" label="创建时间" width="150px"></el-table-column>
						<el-table-column prop="bd_name" label="创建人" width="150px"></el-table-column>
						<el-table-column label="操作" min-width="150" fixed="right">
							<template slot-scope="{ row }">
								<el-link v-if="+row.audit_status != 20" :underline="false" type="warning" @click="toAudit(row)"
									>审核</el-link
								>
								<el-link v-if="+row.audit_status === 20" :underline="false" type="primary" @click="showCode(row)"
									>查看二维码</el-link
								>
								<el-link :underline="false" type="primary" @click="goAdministrator(row)">账号管理</el-link>
							</template>
						</el-table-column>
					</el-table>
					<!-- 分页组件 -->
					<page :total="total" :pageNums="pageNum" :disableMountedFetch="true" @pagedata="onChildValue"></page>
				</template>
			</div>
		</div>
		<!-- 审核状态-弹框 -->
		<el-dialog title="供应商审核" :visible.sync="auditState" width="560px" :close-on-click-modal="false">
			<div class="auditCentent">
				<div class="row-info clear" style="margin-bottom: 10px;">
					<div class="fl title-key">审核状态：</div>
					<div class="fl list-cont">
						<el-select v-model="audit.pre_audit_status" placeholder="请选择" @change="changeStatus">
							<el-option label="请选择" value="10" disabled></el-option>
							<el-option label="审核通过" value="20"></el-option>
							<el-option label="审核驳回" value="30"></el-option>
						</el-select>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key">备注：</div>
					<div class="fl list-cont">
						<el-input type="textarea" :rows="4" :cols="32" v-model="audit.pre_audit_desc"></el-input>
					</div>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<span class="btnOK mr_20" @click="auditBtn()">确 定</span>
				<span class="resetBtn" @click="closeDialog()">取 消</span>
			</div>
		</el-dialog>
		<!-- 供应商码 -->
		<el-dialog title="二维码" :visible.sync="gysCode" width="500px" :close-on-click-modal="false">
			<p class="gys-style">
				{{ gysName }}
			</p>
			<div class="auditCentent">
				<img :src="gysUrl" alt="二维码" style="margin: 0 auto; display: block; min-height: 280px;" />
			</div>
			<div slot="footer" class="dialog-footer">
				<span class="resetBtn" @click="closeDialog()">关 闭</span>
			</div>
		</el-dialog>
	</div>
</template>

<script>
var common = require('../../../static/tool.js')
import {
	fetchSupplierList,
	editSupplier,
	auditSupplier,
	fetchSupplierQrCode,
	getListForSearch
} from '@/api/supplier.js'
import { fetchQrcodeList } from '@/api/staff.js'

export default {
	name: 'SupplierList',
	data() {
		return {
			manageInfo: JSON.parse(sessionStorage.getItem('manageInfo')), //登录信息
			url: common.url,
			head_url: common.head_url,
			cityList: [], //城市列表
			//搜索对应值
			query: {
				name: '',
				status: '',
				city_id: '',
				agent_id: '',
				principal_mobile: '',
				audit_status: '',
				start_time: '',
				end_time: '',
				bd_name: '',
				audit_name: ''
			},
			demandList: [],
			auditState: false,
			gysCode: false,
			gysUrl: '',
			gysName: '',
			audit: {
				sn: '',
				pre_audit_status: '',
				pre_audit_desc: ''
			},
			//向分页组件传值
			total: 0,
			pageNum: 1,
			pageSizeNow: 20,
			searchList: [],
			cjrSearchList: [],
			shrSearchList: [],
			agent_reset: 0
		}
	},
	created() {
		this.getQrcodeList()
		this.getCjrListSearch()
		this.getShrListSearch()
	},
	mounted() {},
	methods: {
		async listData() {
			try {
				let ret = await fetchSupplierList({
					pageSize: this.pageSizeNow,
					page: this.pageNum,
					...this.query
				})
				if (ret.list) {
					// [1]启用 [2]禁用 [其他]异常
					ret.list.forEach(item => {
						if (item.status == 1) {
							item.status_tag = true
						} else if (item.status == 2) {
							item.status_tag = false
						}
					})
					this.demandList = ret.list
					this.total = ret.count
				} else {
					this.demandList = []
					this.total = 0
				}
			} catch (err) {
				console.log('err:', err)
			}
		},

		async getQrcodeList() {
			try {
				let ret = await fetchQrcodeList({
					type: 2
				})
				ret.list.forEach(item => {
					item.value = item.name
				})
				this.searchList = ret.list
			} catch (err) {
				// console.log(err)
			}
		},

		async getCjrListSearch() {
			try {
				let ret = await getListForSearch({
					type: 1
				})
				ret.list.forEach(item => {
					item.value = item.name
				})
				this.cjrSearchList = ret.list
			} catch (err) {
				console.log(err)
			}
		},
		async getShrListSearch() {
			try {
				let ret = await getListForSearch({
					type: 2
				})
				ret.list.forEach(item => {
					item.value = item.name
				})
				this.shrSearchList = ret.list
			} catch (err) {
				console.log(err)
			}
		},

		shearchBtn() {
			this.pageNum = 1
			this.listData()
		},
		async resetDataBtn() {
			await this.resetData()
			// await this.listData()
		},
		resetData() {
			this.pageNum = 1
			this.query.sn = ''
			this.query.logic_sn = ''
			this.query.logic_type = ''
			this.query.start_time = ''
			this.query.end_time = ''
			this.agent_reset += 1
		},
		goToMore(row) {
			const { href } = this.$router.resolve({
				path: '/roleMainXq',
				query: { rl_sn: row.logic_sn, start_date: row.demand_start_date }
			})
			window.open(href, '_blank')
		},
		goToAdd(row) {
			this.$router.push('/supplierAdd')
		},
		// 去供应商账号管理
		goAdministrator(row) {
			const { href } = this.$router.resolve({
				path: '/administrator',
				query: { supplier_sn: row.sn }
			})
			window.open(href, '_blank')
		},
		toAudit(row) {
			this.auditState = true
			this.audit.sn = row.sn
			this.audit.pre_audit_status = '' + row.audit_status
			this.audit.pre_audit_desc = row.remark
		},
		async showCode(row) {
			try {
				let ret = await fetchSupplierQrCode({
					nickname: row.name,
					user_id: row.id,
					// type: row.type
					type: 2
				})
				this.gysCode = true
				this.gysUrl = ret
				this.gysName = row.name
			} catch (err) {
				console.log(err)
			}
		},
		toMore(row) {
			this.$router.push({
				path: '/supplierAdd',
				query: {
					sn: row.sn
				}
			})
		},
		toExport(row) {
			this.$router.push({
				path: '/suoolierReport',
				query: {
					sn: row.sn
				}
			})
		},
		async auditBtn() {
			try {
				let ret = await auditSupplier({
					sn: this.audit.sn,
					audit_status: this.audit.pre_audit_status,
					audit_name: JSON.parse(sessionStorage.getItem('manageInfo')).name,
					remark: this.audit.pre_audit_desc
				})

				this.$message.success('操作成功！')
				this.listData()
				this.closeDialog()
			} catch (err) {
				console.log(err)
			}
		},
		changeStatus() {
			this.audit.pre_audit_desc = ''
		},
		closeDialog() {
			this.auditState = false
			this.audit.sn = ''
			this.audit.pre_audit_status = ''
			this.audit.pre_audit_desc = ''
			this.gysCode = false
			this.gysUrl = ''
			this.gysName = ''
		},
		//人员状态切换
		async redactBtn(row, index) {
			try {
				let message = row.status_tag ? '确定要将该供应商状态设置为启用吗？' : '确定要将该供应商状态设置为关闭吗？'
				let ret = await this.$confirm(message, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).catch(err => err)

				if (ret === 'confirm') {
					await editSupplier({ sn: row.sn, status: row.status_tag ? '1' : '2' })
					this.$message.success('设置成功！')
					this.listData()
				} else {
					this.demandList.forEach(item => {
						if (item.sn == row.sn) {
							item.status_tag = !row.status_tag
						}
					})
				}
			} catch (err) {
				console.log('err:', err)
			}
		},
		//分页组件->子组件传值
		onChildValue(item) {
			this.pageNum = item[0]
			this.pageSizeNow = item[1]
			this.listData()
		},
		//隐藏所有的弹框
		hiddenRY() {
			this.recharge.amount = ''
			this.recharge.channel = ''
			this.recharge.entry_company = ''
			this.recharge.remark = ''
			this.withdrawal.amount = ''
			this.withdrawal.remark = ''
			this.overdraft.amount = ''
			this.overdraft.remark = ''
		},
		//供应商名称的自动完成
		querySearch(queryString, cb) {
			var restaurants = this.searchList
			var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
			cb(results)
		},
		createFilter(queryString) {
			return restaurant => {
				return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
			}
		},
		//创建人的自动完成
		querySearchCjr(queryString, cb) {
			var restaurants = this.cjrSearchList
			var results = queryString ? restaurants.filter(this.createFilterCjr(queryString)) : restaurants
			cb(results)
		},
		createFilterCjr(queryString) {
			return restaurant => {
				return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
			}
		},
		//审核人的自动完成
		querySearchShr(queryString, cb) {
			var restaurants = this.shrSearchList
			var results = queryString ? restaurants.filter(this.createFilterShr(queryString)) : restaurants
			cb(results)
		},
		createFilterShr(queryString) {
			return restaurant => {
				return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
			}
		},
		// getcityList() {
		// 	//获取城市列表
		// 	let fn = new FormData()
		// 	this.$http.post(this.url + '/city/list', fn).then(
		// 		res => {
		// 			if (res.data.msg == '查询成功' || res.data.code == '200') {
		// 				this.cityList = res.data.data.list
		// 				this.query.city_id = res.data.data.list[0].id
		// 				this.listData()
		// 			} else if (res.data.code == '8886') {
		// 				//code   8886  登录过期
		// 				sessionStorage.clear()
		// 				this.$alert('登录已过期，请重新登录 !', '提示', {
		// 					confirmButtonText: '确定',
		// 					callback: action => {
		// 						window.location = 'login.html'
		// 					}
		// 				})
		// 				return
		// 			} else {
		// 				this.$message.error(res.data.msg)
		// 				return
		// 			}
		// 		},
		// 		res => {
		// 			this.$message.error('网络错误！')
		// 			return
		// 		}
		// 	)
		// },
		setValue(arrVal) {
			this.query.agent_id = arrVal.agent_id
			this.cityList = arrVal.city_list
			this.query.city_id = this.cityList[0].id
			this.listData()
		}
	}
}
</script>

<style scoped>
.top {
	display: flex;
	margin-bottom: 20px;
}
.box1 {
	margin-right: 30px;
}

.label-name {
	width: 100px;
	text-align: right;
	font-size: 12px;
	color: #888888;
	line-height: 34px;
	float: left;
}

.label-value {
	font-size: 14px;
	color: #353c48;
	line-height: 34px;
	padding-left: 10px;
	float: left;
}
.money {
	color: #d40505;
	margin-right: 20px;
}
.auditCentent_next {
	display: flex;
	margin-bottom: 10px;
}

.wrap-timeline {
	display: block;
	overflow: auto;
	margin-bottom: 20px;
}

.gys-style {
	font-size: 16px;
	text-align: center;
	background: #4fc5ca;
	padding: 10px 0;
	border-radius: 0px;
	color: #fff;
	position: relative;
	top: -30px;
	width: 500px;
	left: -20px;
}
</style>
<style>
.tableMaxBox .el-table th .el-checkbox__input {
	display: block;
}
</style>



// WEBPACK FOOTER //
// src/components/supplier/SupplierList.vue